<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta charset="UTF-8">
    <title>在线咨询</title>
    <link type="text/css" rel="styleSheet" href="css/css.css"/>
    <link type="text/css" rel="styleSheet" href="css/emoji.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/focus.js"></script>
</head>
<body>

<div class="container">
    <div class="content">
        <!--        时间-->
        <div class="time">17：15</div>
        <!--        客服-->
        <div class="mes-content">
            <img src="image/kefu.png" class="kefu" alt="">
            <div class="kefu-box">
                <text class="kefu-text">客服</text>
                <div class="content-text">
                    亲，贷投狗为您提供房屋抵押，一二抵,有无按揭均可贷，信·
                    用贷款、企业贷款、按揭赎楼、信用卡办理、公积金代缴、特价房源等。10年专业贷款服务，不动产金融超市，3万用户共同选择，快速为你解决贷款需求！
                </div>
            </div>
        </div>
        <!--        用户-->
        <div class="mes-content user-content">
            <div class="kefu-box user-box">
                <div class="content-text user-content-text">您好!</div>
            </div>
            <img src="image/yonghu.png" class="kefu" alt="">
        </div>

    </div>
    <div class="input-box">
        <div class="u-input-con">
            <img class="bianji" src="image/bq.png"/>
            <div contenteditable="true" class="input-content" placeholder="请输入..."></div>
            <button class="btn-send">发送</button>
        </div>
        <!--        表情包-->
        <div class="mont">
            <div class="emoji-box"></div>
        </div>

    </div>

</div>

</body>
</html>
<script>

    $(function () {
        // //加载表情包
        for (let i = 0; i <= 31; i++) {
            $('.emoji-box').append('<div class="em-row"><img src="image/kongbai.png" class="emoji" contenteditable="false" style=" background-position: ' + (i * -27) + 'px 0px;"/></div>');
        }
        $('.emoji-box').click(function (e){
            e.stopPropagation();
        })
        //选择表情
        $('.emoji-box .emoji').click(function (e) {
            e.stopPropagation();
            let index = $(this).index();
            if (index < 31) {
                let i = $(this).clone()[0];
                // pasteHtmlAtCaret(i.outerHTML);
                $('.input-content').append(i);
                // $('.input-content').focus();
                // keepLastIndex($('.input-content')[0])
            }

        })
        //显示表情
        $('.bianji').click(function (e) {
            e.stopPropagation();
           showMeoji();
        })
        //隐藏表情
        $('.container').click(function () {
           hiddenMeoji();
            $('.input-content').focus();
        })

    })
    //隐藏表情包
    function hiddenMeoji() {
        $('.emoji-box').css({
            'display': 'none'
        })
    };
    //显示表情包
    function showMeoji() {
        $('.emoji-box').css({
            'display': 'flex'
        })
    };

</script>

